import React,{useEffect,FC} from 'react';
import { Modal, Form, Input, } from 'antd';
import { UserObj ,UserForm} from '../data';
interface UserModalProps{
    visible: boolean,
    record: UserObj | undefined,
    onCancel:()=>void,
    onFinish:(value:UserForm)=>void,
}
const UserModal:FC<UserModalProps> = (props) => {
    const {visible,record,onCancel,onFinish} = props;
    const [form] = Form.useForm();
    useEffect(()=>{
        if(record===undefined){
            form.resetFields();
        }else{
            form.setFieldsValue(record);
        } 
    },[visible]);

    const onOk = ()=>{
        form.submit();
    }
    return (
        <div>
            <Modal title="Basic Modal" visible={visible}
                onCancel={onCancel}
                onOk={onOk}
                forceRender
                >
                <Form form={form} onFinish={onFinish}>
                    <Form.Item
                        label="Name"
                        name="name"
                        rules={[{ required: true, message: 'Please input your username!' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="Email"
                        name="email">
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="Create Time"
                        name="create_time">
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="Status"
                        name="status">
                        <Input />
                    </Form.Item> 
                </Form>
            </Modal>
        </div>
    )
}

export default UserModal;